<template>
	<!-- 合作研发 -->
	<div ref="chartDom" class="chart" :style="props.style" v-loading="isLoding"></div>
</template>

<script setup lang="ts" name="xHCharts">
import * as echarts from 'echarts';
import { getTalentCooperatedDevlop } from '/@/api/cx/list';
const props = defineProps({
	// 数据
	data: {
		type: [Object, String],
	},
	talentId: {
		type: [Number, String],
	},
	// 样式
	style: {
		type: String,
		default: 'width: 100%;height: 400px;',
	},
});
const chartDom = ref();
let myChart = null;
const isLoding = ref(false);
// 数据
const state = reactive<any>({
	data: [],
	links: [],
});
function mapInit() {
	myChart = echarts.init(chartDom.value);
	let option: any = {};
	if (state.data.length > 0) {
		option = {
			title: {
				text: '',
			},
			tooltip: {
				trigger: 'item',
				triggerOn: 'mousemove',
				formatter: function (paras) {
					console.log('paras', paras);
					let dataType = paras.dataType;
					if (dataType == 'edge') {
						let sourceName = findName(paras.data.source);
						let targetName = findName(paras.data.target);
						let value = paras.data.value;
						return `${sourceName}>${targetName}<br>合作件数：${value}`;
					} else {
						let name = paras.data.name;
						let value = paras.data.value;
						return `${name}：${value} 件专利`;
					}
				},
			},
			visualMap: {
				min: 0,
				max: 1000,
				left: 26,
				bottom: 40,
				showLabel: !0,
				text: ['数量'],
				precision: 0,
				pieces: [
					{
						lt: 5,
						color: '#c5dcf2',
					},

					{
						gte: 5,
						lt: 10,
						color: '#9dc9e1',
					},
					{
						gte: 11,
						lt: 20,
						color: '#6eb3d6',
					},
					{
						gte: 21,
						lt: 50,
						color: '#2170b3',
					},
					{
						gte: 51,
						color: '#084495',
					},
				],
			},
			animationDurationUpdate: 1500,
			label: {
				normal: {
					show: true,
					textStyle: {
						fontSize: 12,
					},
				},
			},
			series: [
				{
					type: 'graph',
					layout: 'force', //采用力引导布局
					symbolSize: 45,
					legendHoverLink: true, //启用图例 hover 时的联动高亮。
					focusNodeAdjacency: true, //在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
					roam: true,
					label: {
						normal: {
							show: true,
							position: 'inside',
							textStyle: {
								fontSize: 12,
							},
						},
					},
					force: {
						repulsion: 1000,
					},
					edgeSymbolSize: [4, 50],
					edgeLabel: {
						normal: {
							show: true,
							textStyle: {
								fontSize: 10,
							},
							formatter: '{c}',
						},
					},
					categories: [
						{
							name: '人员',
							itemStyle: {
								normal: {
									color: '#BB8FCE',
								},
							},
						},
						{
							name: '机构',
							itemStyle: {
								normal: {
									color: '#0099FF',
								},
							},
						},
						{
							itemStyle: {
								normal: {
									color: '#5DADE2',
								},
							},
						},
					],
					data: state.data,
					links: state.links,
					lineStyle: {
						normal: {
							opacity: 0.9,
							width: 1,
							curveness: 0,
						},
					},
				},
			],
		};
	} else {
		option = {
			title: {
				text: '暂无数据',
				x: 'center',
				y: 'center',
				textStyle: {
					fontSize: 14,
					fontWeight: 'normal',
				},
			},
		};
	}

	option && myChart.setOption(option);
}

function findName(id) {
	let result = state.data.find((n: any) => n.id == id);
	if (result) {
		return result.name;
	} else {
		return '';
	}
}
onMounted(() => {
	let param = {
		talentId: props.talentId,
	};
	isLoding.value = true;
	getTalentCooperatedDevlop(param)
		.then((res) => {
			if (res.code == 0) {
				state.data = res.data.data;
				state.links = res.data.links;
				mapInit();
			}
		})
		.catch(() => {
			state.data = [];
			state.links = [];
			mapInit();
		})
		.finally(() => {
			isLoding.value = false;
		});
});
</script>

<style lang="scss" scoped>
.chart {
	height: 500px;
}
</style>
